<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  /* 响应式布局
     不同尺寸的设备 如电脑 pad 手机等 显示不同的样式
      1.媒体查询 是实现响应式的方案
  */
  /* screen 屏幕 
      min-width:768px 最小屏幕尺寸 
      max-width:1024px  最大尺寸 */

  /* 0-320 的屏幕尺寸 */
  @media screen and (min-width:0) and (max-width:320px){
        #box{
          width: 100px;
          height: 100px;
          background: darkblue;
          font-size: 20px;
        }
        #box p{
          color: darkgreen;
        }
  }
  /* 320-768 */
  @media screen and (min-width:320px) and (max-width:768px){
    #box{
          width: 200px;
          height: 200px;
          background: red;
          font-size: 30px;
          text-decoration: line-through;
        }
        #box p{
          color: darkgreen;
          font-size: 30px;
        }
  }
  /* 768--992 屏幕尺寸 是平板 */
  @media screen and (min-width:768px) and (max-width:992px){
    #box{
          width: 400px;
          height: 400px;
          background: darkorange;
          font-size: 30px;
          text-decoration: line-through;
        }
        #box p{
          color: darkgreen;
          font-size: 30px;
        }
  }
   /* 768--992 屏幕尺寸 是平板 */
   @media screen and (min-width:992px) {
    #box{
          width: 600px;
          height: 600px;
          background: darkseagreen;
          font-size: 30px;
          text-decoration: line-through;
          font-weight: bold;
        }
        #box p{
          color: darkgreen;
          font-size: 30px;
        }
  }
</style>
<body>
    <div id="box">
        你好
        <p>明天放假</p>
    </div>
    <script>
        // flex
        // 怪异盒模型
        // 过渡transition 转换transform 动画 @keyframes animation
        // border-radius
        // 盒子阴影
    </script>
</body>
</html>
